<template>
  <!-- 归档信息管理页面 -->
  <div class="externalEdit" v-if="formLabelAlign.fileType">
    <!-- 头部 -->
    <div class="info-top">
      <div class="info-top-left">
        <div class="line"></div>
        <span class="fileinfo">文件信息</span>
        <div class="info-top-right">
          <!-- <el-button type="primary" class="btn-lanse"
            ><i class="el-icon-tickets el-icon--left"> 暂存</i></el-button
          > -->
          <el-button type="primary" class="btn-lvse" @click="save"
            ><i class="el-icon-circle-check el-icon--left"> 保存</i></el-button
          >
          <el-button type="primary" class="btn-hongse" @click="goBank"
            ><i class="el-icon-back el-icon--left"> 返回</i></el-button
          >
        </div>
      </div>
    </div>
    <!-- 分割线 -->
    <div class="divider">
      <el-divider></el-divider>
    </div>
    <!-- 中间 -- 基本信息-->
    <div class="info-center">
      <span class="info-center-text" @click="jbFn">基本信息</span>
      <div class="info-center-form" v-if="jbShowModel">
        <el-form
          style="width: 100%"
          :label-position="labelPosition"
          label-width="80px"
          :model="formLabelAlign"
        >
          <!-- 名称 -->
          <el-form-item
            required
            v-if="typeChangeTitle(formLabelAlign.fileType, 'fileName')"
            :label="typeChangeTitle(formLabelAlign.fileType, 'fileName')"
            class="info-center-form-text"
          >
            <el-input
              v-model="formLabelAlign.fileName"
              class="info-center-form-input"
            ></el-input>
          </el-form-item>
          <!-- 来源 -->
          <!-- <el-form-item
          required
            v-if="typeChangeTitle(formLabelAlign.fileType, 'laiyuan')"
            :label="typeChangeTitle(formLabelAlign.fileType, 'laiyuan')"
            class="info-center-form-text"
          >
            <el-input
              v-model="formLabelAlign.laiyuan"
              class="info-center-form-input"
            ></el-input>
          </el-form-item> -->
          <!-- 年度 -->
          <el-form-item
            required
            v-if="typeChangeTitle(formLabelAlign.fileType, 'niandu')"
            :label="typeChangeTitle(formLabelAlign.fileType, 'niandu')"
            class="info-center-form-text"
          >
            <el-input
              v-model="formLabelAlign.niandu"
              class="info-center-form-input"
            ></el-input>
          </el-form-item>
          <!-- 业务活动描述/内容描述 -->
          <el-form-item
            v-if="typeChangeTitle(formLabelAlign.fileType, 'nrms')"
            :label="typeChangeTitle(formLabelAlign.fileType, 'nrms')"
            class="info-center-form-text"
          >
            <el-input
              v-model="formLabelAlign.nrms"
              class="info-center-form-input"
            ></el-input>
          </el-form-item>

          <!-- 题名/格式 -->
          <el-form-item
            v-if="typeChangeTitle(formLabelAlign.fileType, 'tm')"
            :label="typeChangeTitle(formLabelAlign.fileType, 'tm')"
            class="info-center-form-text"
          >
            <el-input
              v-model="formLabelAlign.tm"
              class="info-center-form-input"
            ></el-input>
          </el-form-item>
          <!-- 负责人/摄影者/录音者/摄像者 -->
          <el-form-item
            required
            v-if="typeChangeTitle(formLabelAlign.fileType, 'creator')"
            :label="typeChangeTitle(formLabelAlign.fileType, 'creator')"
            class="info-center-form-text"
          >
            <el-input
              v-model="formLabelAlign.creator"
              class="info-center-form-input"
            ></el-input>
          </el-form-item>
          <!-- 日期/摄影时间/录音时间/摄像时间 -->
          <el-form-item
            v-if="typeChangeTitle(formLabelAlign.fileType, 'fileTime')"
            :label="typeChangeTitle(formLabelAlign.fileType, 'fileTime')"
            class="info-center-form-text"
          >
            <el-date-picker
              class="info-center-form-input"
              v-model="formLabelAlign.fileTime"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
          <!-- 密级 -->
          <el-form-item
            required
            v-if="typeChangeTitle(formLabelAlign.fileType, 'mj')"
            :label="typeChangeTitle(formLabelAlign.fileType, 'mj')"
            class="info-center-form-text"
          >
            <el-input
              v-model="formLabelAlign.mj"
              class="info-center-form-input"
            ></el-input>
          </el-form-item>
          <!-- 文件大小 -->
          <el-form-item
            required
            v-if="typeChangeTitle(formLabelAlign.fileType, 'fileSize')"
            :label="typeChangeTitle(formLabelAlign.fileType, 'fileSize')"
            class="info-center-form-text"
          >
            <el-input
              v-model="formLabelAlign.fileSize"
              class="info-center-form-input"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 中间 -- 特征信息-->
    <div
      class="info-center"
      v-if="formLabelAlign.fileType != 3 && formLabelAlign.fileType != 5"
    >
      <span class="info-center-text" @click="tzFn">特征信息</span>
      <div class="info-center-form" v-if="tzShowModel">
        <el-form
          style="width: 100%"
          :label-position="labelPosition"
          label-width="80px"
          :model="formLabelAlign"
        >
          <!-- 实体 -->
          <el-form-item
            v-if="typeChangeTitle(formLabelAlign.fileType, 'entity')"
            :label="typeChangeTitle(formLabelAlign.fileType, 'entity')"
            class="info-center-form-text"
          >
            <el-input
              v-model="formLabelAlign.entity"
              class="info-center-form-input"
            ></el-input>
          </el-form-item>
          <!-- 地点 -->
          <el-form-item
            v-if="typeChangeTitle(formLabelAlign.fileType, 'site')"
            :label="typeChangeTitle(formLabelAlign.fileType, 'site')"
            class="info-center-form-text"
          >
            <el-input
              v-model="formLabelAlign.site"
              class="info-center-form-input"
            ></el-input>
          </el-form-item>
          <!-- 场景 -->
          <el-form-item
            v-if="typeChangeTitle(formLabelAlign.fileType, 'cj')"
            :label="typeChangeTitle(formLabelAlign.fileType, 'cj')"
            class="info-center-form-text"
          >
            <el-input
              v-model="formLabelAlign.cj"
              class="info-center-form-input"
            ></el-input>
          </el-form-item>
          <!-- 音频时间 -->
          <el-form-item
            v-if="typeChangeTitle(formLabelAlign.fileType, 'ypsi')"
            :label="typeChangeTitle(formLabelAlign.fileType, 'ypsi')"
            class="info-center-form-text"
          >
            <el-date-picker
              class="info-center-form-input"
              v-model="formLabelAlign.ypsi"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
          <!-- 事件 -->
          <el-form-item
            v-if="typeChangeTitle(formLabelAlign.fileType, 'incident')"
            :label="typeChangeTitle(formLabelAlign.fileType, 'incident')"
            class="info-center-form-text"
          >
            <el-input
              v-model="formLabelAlign.incident"
              class="info-center-form-input"
            ></el-input>
          </el-form-item>
          <!-- 文字描述 -->
          <el-form-item
            v-if="typeChangeTitle(formLabelAlign.fileType, 'words')"
            :label="typeChangeTitle(formLabelAlign.fileType, 'words')"
            class="info-center-form-text"
          >
            <el-input
              v-model="formLabelAlign.words"
              class="info-center-form-input"
            ></el-input>
          </el-form-item>
          <!-- 负责人 -->
          <el-form-item
            v-if="typeChangeTitle(formLabelAlign.fileType, 'fzr')"
            :label="typeChangeTitle(formLabelAlign.fileType, 'fzr')"
            class="info-center-form-text"
          >
            <el-input
              v-model="formLabelAlign.fzr"
              class="info-center-form-input"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 中间 -- 其他信息-->
    <div class="info-center">
      <span class="info-center-text" @click="qtFn">其他信息</span>
      <div class="info-center-form" v-if="qtShowModel">
        <el-form
          style="width: 100%"
          :label-position="labelPosition"
          label-width="80px"
          :model="formLabelAlign"
        >
          <!-- 试验类型和武器装备类型 -->
          <el-form-item
            required
            v-if="typeChangeTitle(formLabelAlign.fileType, 'lxwqzb')"
            :label="typeChangeTitle(formLabelAlign.fileType, 'lxwqzb')"
            class="info-center-form-text"
          >
            <el-input
              required
              v-model="formLabelAlign.lxwqzb"
              class="info-center-form-input"
            ></el-input>
          </el-form-item>
          <!-- 试验类型 -->
          <el-form-item
            v-if="typeChangeTitle(formLabelAlign.fileType, 'sylx')"
            :label="typeChangeTitle(formLabelAlign.fileType, 'sylx')"
            class="info-center-form-text"
          >
            <el-input
              v-model="formLabelAlign.sylx"
              class="info-center-form-input"
            ></el-input>
          </el-form-item>
          <!-- 解析规则或专用解析工具 -->
          <el-form-item
            v-if="typeChangeTitle(formLabelAlign.fileType, 'jxgj')"
            :label="typeChangeTitle(formLabelAlign.fileType, 'jxgj')"
            class="info-center-form-text"
          >
            <el-input
              v-model="formLabelAlign.jxgj"
              class="info-center-form-input"
            ></el-input>
          </el-form-item>
          <!-- 数据项 -->
          <el-form-item
            v-if="typeChangeTitle(formLabelAlign.fileType, 'sjx')"
            :label="typeChangeTitle(formLabelAlign.fileType, 'sjx')"
            class="info-center-form-text"
          >
            <el-input
              v-model="formLabelAlign.sjx"
              class="info-center-form-input"
            ></el-input>
          </el-form-item>
          <!-- 摘要 -->
          <el-form-item
            v-if="typeChangeTitle(formLabelAlign.fileType, 'zy')"
            :label="typeChangeTitle(formLabelAlign.fileType, 'zy')"
            class="info-center-form-text"
          >
            <el-input
              v-model="formLabelAlign.zy"
              class="info-center-form-input"
            ></el-input>
          </el-form-item>
          <!-- 格式 -->
          <el-form-item
            v-if="typeChangeTitle(formLabelAlign.fileType, 'gs')"
            :label="typeChangeTitle(formLabelAlign.fileType, 'gs')"
            class="info-center-form-text"
          >
            <el-input
              v-model="formLabelAlign.gs"
              class="info-center-form-input"
            ></el-input>
          </el-form-item>
          <!-- 处理说明 -->
          <el-form-item
            v-if="typeChangeTitle(formLabelAlign.fileType, 'clsm')"
            :label="typeChangeTitle(formLabelAlign.fileType, 'clsm')"
            class="info-center-form-text"
          >
            <el-input
              v-model="formLabelAlign.clsm"
              class="info-center-form-input"
            ></el-input>
          </el-form-item>
          <!-- 分辨率 -->
          <el-form-item
            v-if="typeChangeTitle(formLabelAlign.fileType, 'fbl')"
            :label="typeChangeTitle(formLabelAlign.fileType, 'fbl')"
            class="info-center-form-text"
          >
            <el-input
              v-model="formLabelAlign.fbl"
              class="info-center-form-input"
            ></el-input>
          </el-form-item>
          <!-- 时间长度 -->
          <el-form-item
            v-if="typeChangeTitle(formLabelAlign.fileType, 'sjcd')"
            :label="typeChangeTitle(formLabelAlign.fileType, 'sjcd')"
            class="info-center-form-text"
          >
            <el-input
              v-model="formLabelAlign.sjcd"
              class="info-center-form-input"
            ></el-input>
          </el-form-item>
          <!-- 图片宽度 -->
          <el-form-item
            v-if="typeChangeTitle(formLabelAlign.fileType, 'tpkd')"
            :label="typeChangeTitle(formLabelAlign.fileType, 'tpkd')"
            class="info-center-form-text"
          >
            <el-input
              v-model="formLabelAlign.tpkd"
              class="info-center-form-input"
            ></el-input>
          </el-form-item>
          <!-- 图片高度 -->
          <el-form-item
            v-if="typeChangeTitle(formLabelAlign.fileType, 'tpgd')"
            :label="typeChangeTitle(formLabelAlign.fileType, 'tpgd')"
            class="info-center-form-text"
          >
            <el-input
              v-model="formLabelAlign.tpgd"
              class="info-center-form-input"
            ></el-input>
          </el-form-item>
          <!-- 音频编码 -->
          <el-form-item
            v-if="typeChangeTitle(formLabelAlign.fileType, 'ypbm')"
            :label="typeChangeTitle(formLabelAlign.fileType, 'ypbm')"
            class="info-center-form-text"
          >
            <el-input
              v-model="formLabelAlign.ypbm"
              class="info-center-form-input"
            ></el-input>
          </el-form-item>
          <!-- 视频编码标准 -->
          <el-form-item
            v-if="typeChangeTitle(formLabelAlign.fileType, 'spbmbz')"
            :label="typeChangeTitle(formLabelAlign.fileType, 'spbmbz')"
            class="info-center-form-text"
          >
            <el-input
              v-model="formLabelAlign.spbmbz"
              class="info-center-form-input"
            ></el-input>
          </el-form-item>
          <!-- 色彩空间 -->
          <el-form-item
            v-if="typeChangeTitle(formLabelAlign.fileType, 'sckj')"
            :label="typeChangeTitle(formLabelAlign.fileType, 'sckj')"
            class="info-center-form-text"
          >
            <el-input
              v-model="formLabelAlign.sckj"
              class="info-center-form-input"
            ></el-input>
          </el-form-item>
          <!-- 帧大小 -->
          <el-form-item
            v-if="typeChangeTitle(formLabelAlign.fileType, 'zdx')"
            :label="typeChangeTitle(formLabelAlign.fileType, 'zdx')"
            class="info-center-form-text"
          >
            <el-input
              v-model="formLabelAlign.zdx"
              class="info-center-form-input"
            ></el-input>
          </el-form-item>
          <!-- 帧速率 -->
          <el-form-item
            v-if="typeChangeTitle(formLabelAlign.fileType, 'zsl')"
            :label="typeChangeTitle(formLabelAlign.fileType, 'zsl')"
            class="info-center-form-text"
          >
            <el-input
              v-model="formLabelAlign.zsl"
              class="info-center-form-input"
            ></el-input>
          </el-form-item>
          <!-- 视频比特率 -->
          <el-form-item
            v-if="typeChangeTitle(formLabelAlign.fileType, 'spbtl')"
            :label="typeChangeTitle(formLabelAlign.fileType, 'spbtl')"
            class="info-center-form-text"
          >
            <el-input
              v-model="formLabelAlign.spbtl"
              class="info-center-form-input"
            ></el-input>
          </el-form-item>
          <!-- 音频编码标准 -->
          <el-form-item
            v-if="typeChangeTitle(formLabelAlign.fileType, 'ypbmbz')"
            :label="typeChangeTitle(formLabelAlign.fileType, 'ypbmbz')"
            class="info-center-form-text"
          >
            <el-input
              v-model="formLabelAlign.ypbmbz"
              class="info-center-form-input"
            ></el-input>
          </el-form-item>
          <!-- 音频比特率 -->
          <el-form-item
            v-if="typeChangeTitle(formLabelAlign.fileType, 'ypbtl')"
            :label="typeChangeTitle(formLabelAlign.fileType, 'ypbtl')"
            class="info-center-form-text"
          >
            <el-input
              v-model="formLabelAlign.ypbtl"
              class="info-center-form-input"
            ></el-input>
          </el-form-item>
          <!-- 音频采样率 -->
          <el-form-item
            v-if="typeChangeTitle(formLabelAlign.fileType, 'ypcyl')"
            :label="typeChangeTitle(formLabelAlign.fileType, 'ypcyl')"
            class="info-center-form-text"
          >
            <el-input
              v-model="formLabelAlign.ypcyl"
              class="info-center-form-input"
            ></el-input>
          </el-form-item>
          <!-- 音频采样精度 -->
          <el-form-item
            v-if="typeChangeTitle(formLabelAlign.fileType, 'ypcyjd')"
            :label="typeChangeTitle(formLabelAlign.fileType, 'ypcyjd')"
            class="info-center-form-text"
          >
            <el-input
              v-model="formLabelAlign.ypcyjd"
              class="info-center-form-input"
            ></el-input>
          </el-form-item>
          <!-- 声道数 -->
          <el-form-item
            v-if="typeChangeTitle(formLabelAlign.fileType, 'sds')"
            :label="typeChangeTitle(formLabelAlign.fileType, 'sds')"
            class="info-center-form-text"
          >
            <el-input
              v-model="formLabelAlign.sds"
              class="info-center-form-input"
            ></el-input>
          </el-form-item>
          <!-- 捕获设备捕捉/捕获设备 -->
          <el-form-item
            v-if="typeChangeTitle(formLabelAlign.fileType, 'bhsb')"
            :label="typeChangeTitle(formLabelAlign.fileType, 'bhsb')"
            class="info-center-form-text"
          >
            <el-input
              v-model="formLabelAlign.bhsb"
              class="info-center-form-input"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 底部 -- 文件内容-->
    <div class="info-bottom" v-if="formLabelAlign.fileType != 5">
      <span class="info-bottom-text">文件内容</span>
      <div class="info-bottom-box flex-between-start">
        <div
          class="info-bottom-box-item info-bottom-box-item-lf"
          v-if="this.formLabelAlign.fileType == 1"
        >
          <div class="btn flex-around" @click="ocrFn()">
            <span class="orc">OCR识别</span>
          </div>
          <img :src="url" style="width: 100%; height: 100%" alt="" />
        </div>
        <div
          class="info-bottom-box-item info-bottom-box-item-lf"
          v-if="this.formLabelAlign.fileType == 2"
        >
          <vueMiniPlayer
            ref="vueMiniPlayer"
            v-if="this.formLabelAlign.fileType == 2"
            :video="video"
            :mutex="true"
          />
        </div>
        <div
          class="info-bottom-box-item info-bottom-box-item-lf"
          style="width: 100%; height: 500px; overflow-y: scroll"
          v-if="this.formLabelAlign.fileType == 3 && type == '1'"
        >
          <Pdf
            style="width: 100%; height: 100%"
            v-for="i in numPages"
            :key="i"
            :src="src"
            :page="i"
          />
        </div>
        <el-button
          v-if="this.formLabelAlign.fileType == 3 && type == '3'"
          @click="downloadFn"
        >
          下载预览</el-button
        >
        <div
          class="info-bottom-box-item info-bottom-box-item-lf"
          style="width: 100%; height: 500px; overflow-y: scroll"
          v-if="this.formLabelAlign.fileType == 3 && type == '2'"
        >
          <iframe
            :src="url"
            frameborder="0"
            style="width: 100%; height: 100%"
          ></iframe>
        </div>
        <aplayer
          ref="videoPlayRef"
          style="width: 80%"
          v-if="this.formLabelAlign.fileType == 4"
          :music="videoPlay"
          :autoplay="true"
        ></aplayer>
        <div
          class="info-bottom-box-item info-bottom-box-item-rt"
          v-if="this.formLabelAlign.fileType == 1"
        >
          <div class="title flex-center-start">识别内容</div>
          <div class="con" v-html="orcDate"></div>
        </div>
      </div>
    </div>
    <!-- 勾选框 -->
    <div
      v-if="
        this.formLabelAlign.fileType == 1 &&
        orcDate &&
        formLabelAlign.fileType != 5
      "
    >
      <div class="info-checkbox">
        <div class="info-checkbox-left">
          <span class="info-checkbox-wdzj">文档自检:</span>
        </div>
        <div class="info-checkbox-center">
          <span class="info-checkbox-one">1. OCR识别的准确率：</span>
        </div>
        <div class="info-checkbox-right">
          <el-radio-group v-model="radioOne">
            <el-radio label="0%~20%">0%~20%</el-radio>
            <el-radio label="20%~40%">20%~40%</el-radio>
            <el-radio label="40%~60%">40%~60%</el-radio>
            <el-radio label="60%~80%">60%~80%</el-radio>
            <el-radio label="80%~100%">80%~100%</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="info-checkbox-two">
        <div class="info-checkbox-zl">
          <span class="info-checkbox-text">2. 著录项的完整性、准确:</span>
        </div>
        <div class="info-checkbox-two-right">
          <el-radio-group v-model="radioTwo">
            <el-radio label="0%~20%">0%~20%</el-radio>
            <el-radio label="20%~40%">20%~40%</el-radio>
            <el-radio label="40%~60%">40%~60%</el-radio>
            <el-radio label="60%~80%">60%~80%</el-radio>
            <el-radio label="80%~100%">80%~100%</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="info-checkbox-three">
        <div class="info-checkbox-ml">
          <span class="info-checkbox-gf">3. 目录格式规范：</span>
        </div>
        <div class="info-checkbox-three-right">
          <el-radio-group v-model="radioThree">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Pdf from "vue-pdf";
import aplayer from "vue-aplayer";

export default {
  name: "externalEdit",
  components: {
    Pdf,
    aplayer,
  },
  data() {
    return {
      tzShowModel: false,
      qtShowModel: false,
      jbShowModel: true,
      radioOne: "",
      radioTwo: "",
      radioThree: "",
      labelPosition: "left",
      numPages: null,
      formLabelAlign: {
        fileName: "",
        fileTime: "",
        creator: "",
        laiyuan: "1",
        niandu: "",
        nrms: "",
        tm: "",
        mj: "",
        fileSize: "",
      },
      url: "",
      video: {
        url: "",
        // 视频海报
        // cover: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png',
        muted: false, // 是否静音播放
        loop: false, // 视频是否循环播放
        preload: "auto", // 视频预加载
        poster: "", // 原生视频默认海报暂不设置
        volume: 1, // 默认音量
        autoplay: false, // 视频自动播放
      },
      videoPlay: {
        title: "名称",
        artist: "音频",
        src: "",
        pic: "",
      },
      type: 1,
      orcDate: "",
      formTitleArr: [
        {
          type: "1",
          fileName: "名称",
          laiyuan: "来源",
          niandu: "年度",
          nrms: "业务活动描述",
          tm: "题名",
          creator: "摄影者",
          fileTime: "摄影时间",
          mj: "密级",
          fileSize: "文件大小",
          entity: "实体",
          site: "地点",
          cj: "场景",
          words: "文字描述",
          lxwqzb: "试验类型和武器装备类型",
          gs: "格式",
          fbl: "分辨率",
          tpkd: "图片宽度",
          tpgd: "图片高度",
          sckj: "色彩空间",
          bhsb: "捕获设备捕捉",
        },
        {
          type: "2",
          fileName: "名称",
          laiyuan: "来源",
          niandu: "年度",
          nrms: "业务活动描述",
          tm: "题名",
          creator: "摄像师",
          fileTime: "摄像时间",
          mj: "密级",
          fileSize: "文件大小",
          entity: "实体",
          site: "地点",
          incident: "事件",
          words: "文字描述",
          sylx: "试验类型",
          gs: "格式",
          sjcd: "时间长度",
          spbmbz: "视频编码标准",
          sckj: "色彩空间",
          zdx: "帧大小",
          zsl: "帧速率",
          spbtl: "视频比特率",
          ypbmbz: "音频编码标准",
          ypbtl: "音频比特率",
          ypcyl: "音频采样率",
          ypcyjd: "音频采样精度",
          sds: "声道数",
          bhsb: "捕获设备",
        },
        {
          type: "3",
          fileName: "名称",
          laiyuan: "来源",
          niandu: "年度",
          nrms: "内容描述",
          tm: "题名",
          creator: "作者或者负责人",
          fileTime: "日期",
          mj: "密级",
          fileSize: "文件大小",
          lxwqzb: "试验类型和武器装备类型",
          sjx: "数据项",
          zy: "摘要",
        },
        {
          type: "4",
          fileName: "名称",
          laiyuan: "来源",
          niandu: "年度",
          nrms: "业务活动描述",
          tm: "题名",
          creator: "录音者",
          fileTime: "录音时间",
          mj: "密级",
          fileSize: "文件大小",
          entity: "实体",
          site: "地点",
          ypsj: "音频时间",
          fzr: "负责人",
          lxwqzb: "试验类型和武器装备类型",
          gs: "格式",
          sjcd: "时间长度",
          ypbm: "音频编码",
          ypbtl: "音频比特率",
          ypcyjd: "音频采样精度",
          sds: "声道数",
          bhsb: "捕获设备",
        },
        {
          type: "5",
          fileName: "名称",
          creator: "采集人",
          fileTime: "文档形成时间",
          laiyuan: "来源",
          niandu: "年度",
          nrms: "业务活动描述",
          tm: "格式",
          mj: "密级",
          fileSize: "文件大小",
          jxgj: "解析规则或专用解析工具",
          clsm: "处理说明",
        },
      ],
    };
  },
  activated() {
    this.getInfoFn();
    this.jbShowModel = true;
    this.tzShowModel = false;
    this.qtShowModel = false;
  },
  destroyed() {
    this.video.url = "obj";
    this.videoPlay.src = "obj";
    this.videoPlay.title = "音频";
    this.videoPlay.artist = " ";
    this.url = "";
    this.orcDate = "";
    this.jbShowModel = true;
    this.tzShowModel = false;
    this.qtShowModel = false;
  },
  methods: {
    tzFn() {
      this.tzShowModel = !this.tzShowModel;
    },
    qtFn() {
      this.qtShowModel = !this.qtShowModel;
    },
    jbFn() {
      this.jbShowModel = !this.jbShowModel;
    },
    getInfoFn() {
      let params = {
        id: this.$route.query.id,
        type: this.$route.query.type,
      };
      this.$api.getUpdateData(params).then((res) => {
        this.formLabelAlign = res.data;
        this.editForm();
        this.orcDate = "";
      });
    },
    save() {
      let flag = this.tipsMessageReturnFn(this.formLabelAlign);
      let obj = {
        typeid: this.formLabelAlign.fileType,
        formLabelAlign: this.formLabelAlign,
      };
      let obj2 = {
        ocrRecognitionAccuracy: this.radioOne,
        bibliographicIntegrity: this.radioTwo,
        directoryFormatSpecification: this.radioThree,
        dataId: this.formLabelAlign.id,
      };
      if (flag) {
        if (this.formLabelAlign.fileType == 1) {
          this.$api.save(obj).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: res.msg,
                type: "success",
              });
              if (this.orcDate) {
                this.$api.updateOCRInfo(obj2).then((res) => {
                  if (res.code == 200) {
                    this.$message({
                      message: res.msg,
                      type: "success",
                    });
                    this.goBank();
                  }
                });
              } else {
                this.goBank();
              }
            } else {
              this.$message({
                message: res.msg,
                type: "error",
              });
            }
          });
        } else {
          this.$api.save(obj).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: res.msg,
                type: "success",
              });
              this.goBank();
            } else {
              this.$message({
                message: res.msg,
                type: "error",
              });
            }
          });
        }
      }
    },
    editForm() {
      // type 1 图片 2 视频 3文档 4 音频
      let type = this.formLabelAlign.fileType;
      this.url = CONFIG.url + "/collect/" + this.formLabelAlign.filePath;
      if (type == 1) {
        console.log("????");
      } else if (type == 2) {
        this.video = {
          url: this.url,
          muted: false, // 是否静音播放
          loop: false, // 视频是否循环播放
          preload: "auto", // 视频预加载
          poster: "", // 原生视频默认海报暂不设置
          volume: 1, // 默认音量
          autoplay: false, // 视频自动播放
        };
      } else if (type == 3) {
        let types = this.url.substring(this.url.lastIndexOf(".") + 1);
        if (types == "pdf") {
          this.src = Pdf.createLoadingTask(this.url);
          this.src.promise.then((pdf) => {
            this.numPages = pdf.numPages;
          });
          this.type = 1;
        } else if (types == "txt") {
          this.type = 2;
        } else {
          this.type = 3;
        }
      } else if (type == 4) {
        this.videoPlay = {
          title: "名称",
          artist: "音频",
          src: this.url,
          pic: "",
        };
      }
    },
    downloadFn() {
      window.open(this.url);
    },
    ocrFn() {
      let obj = {
        dataId: this.formLabelAlign.id,
      };
      this.$api
        .ocr(obj)
        .then((res) => {
          if (res.code == 200) {
            this.orcDate = res.data;
            this.$message({
              message: res.msg,
              type: "success",
            });
            this.$api.getOCRInfo(obj).then((res) => {
              if (res.code == 200) {
                this.radioOne = res.data.ocrRecognitionAccuracy;
                this.radioTwo = res.data.bibliographicIntegrity;
                this.radioThree =
                  res.data.directoryFormatSpecification.toString();
              }
            });
          }
        })
        .catch((res) => {
          this.$message({
            message: res.msg,
            type: "error",
          });
        });
    },
    goBank() {
      this.$router.push({ path: "/archivingManag" });
    },
    typeChangeTitle(type, itemType) {
      let arrItem = this.formTitleArr.filter((item) => {
        return item.type === type;
      });
      if (arrItem.length && arrItem[0].hasOwnProperty(itemType)) {
        return arrItem[0][itemType] + "：";
      } else {
        return false;
      }
    },
    tipsMessageReturnFn(obj) {
      if (!obj.fileName || !obj.fileName.trim()) {
        this.$message({
          message: "名称不能为空",
          type: "warning",
        });
        return;
      }
      if (!obj.niandu || !obj.niandu.trim()) {
        this.$message({
          message: "年度不能为空",
          type: "warning",
        });
        return;
      }
      // if (obj.fileType != 5) {
      if (!obj.creator || !obj.creator.trim()) {
        this.$message({
          message:
            this.typeChangeTitle(obj.fileType, "creator").replace("：", "") +
            "不能为空",
          type: "warning",
        });
        return;
      }
      // }
      if (!obj.mj || !obj.mj.trim()) {
        this.$message({
          message: "密级不能为空",
          type: "warning",
        });
        return;
      }
      if (!obj.fileSize || !obj.fileSize.toString().trim()) {
        this.$message({
          message: "文件大小不能为空",
          type: "warning",
        });
        return;
      }
      if (!obj.lxwqzb || !obj.lxwqzb.trim()) {
        this.$message({
          message: "试验类型和武器装备类型不能为空",
          type: "warning",
        });
        return;
      }
      return true;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/css/mixin.scss";
@import "@/css/flex.scss";
.externalEdit {
  overflow: hidden;
  padding-bottom: 50px;
  .orc {
    cursor: pointer;
  }
  .el-form-item {
    margin-bottom: 10px;
  }
  //头部
  .info-top {
    margin-top: 20px;
    margin-left: 30px;
    .info-top-left {
      .line {
        width: 4px;
        height: 20px;
        background: #3386fe;
        opacity: 1;
        border-radius: 0px;
        float: left;
        margin-top: 2px;
      }
      .fileinfo {
        margin-left: 10px;
        width: 88px;
        height: 30px;
        font-size: 22px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        line-height: 0px;
        color: #1a2e44;
        opacity: 1;
      }
    }
    .info-top-right {
      float: right;
      margin-top: -10px;
      margin-right: 23px;
    }
  }
  //中间
  .info-center {
    margin-left: 37px;
    margin-bottom: 20px;
    .info-center-text {
      width: 72px;
      height: 25px;
      font-size: 18px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      line-height: 0px;
      color: #3386fe;
      opacity: 1;
      cursor: pointer;
    }
    .info-center-form {
      margin-top: 10px;
      .info-center-form-text {
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 0px;
        color: #1a2e44;
        opacity: 1;
      }
      .info-center-form-input {
        width: 446px;
        height: 44px;
      }
    }
  }
  //底部
  .info-bottom {
    margin-left: 37px;
    .info-bottom-text {
      width: 72px;
      height: 25px;
      font-size: 18px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      line-height: 0px;
      color: #3386fe;
      opacity: 1;
    }
    .info-bottom-box {
      margin-top: 10px;
      width: 1566px;
      .info-bottom-box-item {
        @include wh(49%, 479px);
        border: 1px solid #d8d8d8;
        border-radius: 3px;
        position: relative;
        .btn {
          position: absolute;
          right: 0;
          top: 20px;
          @include sc(14px, #fff);
          background: #545e6c;
          border-radius: 3px;
          padding: 3px 6px;
        }
      }
      .info-bottom-box-item-lf {
        background-color: #f0f0f6;
      }
      .info-bottom-box-item-rt {
        .title {
          background-color: #f7f7fa;
          border-bottom: 1px solid #d8d8d8;
          padding: 8px 20px;
          &::before {
            content: "";
            @include wh(3px, 20px);
            margin-right: 5px;
            display: inline-block;
            background-color: #1a77fe;
            border-radius: 2px;
          }
        }
        .con {
          padding: 20px;
          height: 436px;
          overflow-y: scroll;
        }
      }
    }
  }
  //勾选框
  .info-checkbox {
    margin-left: 37px;
    margin-top: 25px;
    width: 100%;
    .info-checkbox-left {
      float: left;
      .info-checkbox-wdzj {
        font-size: 17px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        line-height: 0px;
        color: #1a2e44;
        opacity: 1;
      }
    }
    .info-checkbox-center {
      margin-left: 18px;
      width: 200px;
      float: left;
      .info-checkbox-one {
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 0px;
        color: #1a2e44;
        opacity: 1;
      }
    }
    .info-checkbox-right {
      float: left;
    }
  }
  .info-checkbox-two {
    margin-left: 110px;
    margin-top: 22px;
    width: 100%;
    float: left;
    .info-checkbox-zl {
      margin-left: 18px;
      float: left;
      width: 200px;

      .info-checkbox-text {
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 0px;
        color: #1a2e44;
        opacity: 1;
      }
    }
    .info-checkbox-two-right {
      float: left;
    }
  }
  .info-checkbox-three {
    margin-left: 110px;
    margin-top: 22px;
    float: left;
    .info-checkbox-ml {
      margin-left: 18px;
      float: left;
      width: 200px;
      .info-checkbox-gf {
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 0px;
        color: #1a2e44;
        opacity: 1;
      }
    }
    .info-checkbox-three-right {
      float: left;
      .three {
        margin-left: 83px;
      }
    }
  }
}
</style>
<style>
.externalEdit .el-form-item__label {
  width: 200px !important;
  text-align: right;
}
</style>
